<template>
	<div>
		<el-dialog :title="$t('action.update')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fnumber')" prop="fnumber">
							<el-input v-model="form.fnumber" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fnumber')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fname')" prop="fname">
							<el-input v-model="form.fname" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fname')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fworkorder')" prop="fworkorder">
							<el-input v-model="form.fworkorder" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fworkorder')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fvcom')" prop="fvcom">
							<el-input v-model="form.fvcom" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fvcom')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fnote')" prop="fnote">
							<el-input v-model="form.fnote" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Vswave_fnote')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Vswave_fpicture')" prop="fpicture">
<!--							<ImagesUpload size="small"  fileType="images" :images.sync="form.fpicture"></ImagesUpload>-->
              <el-select filterable remote :remote-method="e => getFileList(e)"  v-model="form.fpicture"  placeholder="请选择图片" clearable>
                <el-option v-for="item in fileList" :key="item.fid" :label="item.fid + ':' + item.fileName" :value="item.fid"></el-option>
              </el-select>
						</el-form-item>
					</el-col>
				 </el-row>
				</el-form>
      <div >
        <el-button size="mini" type="primary" @click = addnewrow()><i class="el-icon-edit" />添加</el-button>
        <el-button size="mini" type="danger"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
      </div>
      <el-table :data ="list" style="width: 100%">
        <el-table-column type="index" width="50">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
<!--        <el-table-column prop="fseq" align="center" label="序号" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            <el-input v-model="scope.row.fseq"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="femperature" align="center" label="温度" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.femperature"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fdianya" align="center" label="电压范围" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fdianya"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fboxing" align="center" label="波形" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fboxing"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fngtype" align="center" label="NG甩线类型" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fngtype"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fresidtime" align="center" label="存放时间" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fresidtime"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="frefreshtime" align="center" label="嵌入式刷新时间" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.frefreshtime"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="测试托盘数量" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ftuopanqty"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="operate" align="center"label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click = addnewrow()><i class="el-icon-edit" />添加</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">{{$t('system.confirm')}}</span>
					<span v-else>{{$t('system.submitting')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { update } from '@/api/app/vswave'
import {detail} from "@/api/app/vswave";
import ImagesUpload from '@/components/common/ImagesUpload.vue'
import {getTuPianList} from "@/api/app/tupian";

export default {
	name:'vswaveupdate',
	components: {
	   		ImagesUpload,
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
		info: {
			type: Object,
		},
	},
	data(){
		return {
		    dialog:{
			},
			form: {
			   fnumber:'',
			   fname:'',
			   fworkorder:'',
			   fvcom:'',
			   fnote:'',
			   fpicture:[],
			},
		    initial:{},        
			loading:false,
			rules: {
			},
      list:[{
        fnumber:'',
        fseq:'',
        femperature :'',
        fdianya:'',
        fboxing:'',
        fngtype:'',
        fresidtime:'',
        frefreshtime:'',
        ftuopanqty:'',
      }],
      fileList:[]
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
		open(){
      detail(this.info).then(res => {
        this.list = res.data.dataList

      })
			this.form = this.info
			this.setDefaultVal('fpicture')

		},
    getFileList(){
      getTuPianList({}).then(res =>{
        this.fileList = res.data.data
      })
    },
    addnewrow(){
      // 向列表中添加一个空对象，用于新增行的编辑
      this.list.push({
        fbillno: '',
        type: ''
      });
    },
    //删除行
    handleDelete(index) {
      this.list.splice(index, 1);
    },
		submit(){
			this.$refs['form'].validate(valid => {
				if(valid) {
					this.loading = true
					update({header:this.form ,dataList:this.list}).then(res => {
						if(res.status == 200){
							this.$message({message: this.$t('system.success'), type: 'success'})
							this.$emit('refresh_list')
							this.closeForm()
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
		setDefaultVal(key){
			if(this.form[key] == null || this.form[key] == ''){
				this.form[key] = []
			}
		},
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
		},
	},
  mounted() {
    this.getFileList()
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss'
</style>
